<template>
  <!-- 医院管理 -->
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-input v-model="form.hospital_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属区域">
              <el-select v-model="form.province_id" placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属分公司">
              <el-select v-model="form.office_id" placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in branchType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="add">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="编号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="医院名称" prop="hospital_name" align="center" />
        <el-table-column label="所属省" prop="province" align="center" />
        <el-table-column label="所属分公司" prop="office" align="center" />
        <el-table-column label="医院活动图片" prop="icon" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.icon | imgUrlFn" alt style="height:60px;width:60px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="医院类型" prop="type_name" align="center" />
        <el-table-column label="医院活动状态" prop="is_on" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_on"
              :active-value="1"
              :inactive-value="0"
              @change="switchChange(scope.row.id,scope.row.is_on)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加女王卡活动医院"
      :visible.sync="dialogFormVisible"
      width="568px"
      @close="close"
      center
    >
      <el-form ref="form1" :model="form1" label-width="130px" :inline="true" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="医院所在省份" prop="hospital_id">
              <el-select v-model="form1.hospital_id" filterable @change="handleChange">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医院名称" prop="hospitalName">
              <el-select v-model="form1.hospitalName" filterable @change="handleChange1">
                <el-option
                  v-for="(item,index) in hospitalName1"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="is_on" label="是否及时上架">
              <el-radio-group v-model="form1.is_on">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item prop="icon" label="医院ICON">
              <newUpload ref="uploadImg" :fileNum="1" :file-list="fileList" :size-number="2"></newUpload>
              <p class="msgText">将选择本地图片进行添加</p>
            </el-form-item>
          </el-col> -->
        </el-row>
        <div class="footer">
          <el-button type="primary" @click="confirm('form1')">立即添加</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import newUpload from "@/components/imgUpload/shopImgUp1";
import { gethospitalList, goddessAdd, getSwitch } from "@/api/goddessMange";
import { getProvinces, getHospital, branch } from "@/api/goddessJava";
// goddessJava
export default {
  // components: { newUpload },
  name: "goddessHostail",
  data() {
    return {
      form: {
        province_id: "",
        hospital_name: "",
        office_id: "",
        page: 1,
        pagesize: 10
      },
      tableData: [],
      branchType: [], //获取分公司
      tableLoading: true,
      form1: {
        hospital_id: "",
        is_on: "",
        // icon: "",
        hospitalName: ""
      },
      flag: true,
      options: [], //获取省
      provinceId: "", //省id
      hospitalId: "", //医院id
      hospitalName1: [], //医院名称
      dialogFormVisible: false,
      fileList: [],
      rules: {
        hospital_id: [
          {
            required: true,
            message: "请选择医院所在省份",
            trigger: "change"
          }
        ],
        hospitalName: [
          {
            required: true,
            message: "请选择医院名称",
            trigger: "change"
          }
        ],
        is_on: [
          {
            required: true,
            message: "请选择是否上架"
          }
        ],
        // icon: [
        //   {
        //     required: true,
        //     message: "请选择医院图片"
        //   }
        // ]
      },
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0 // 总条目数,
    };
  },
  filters: {
    imgUrlFn(e) {
      return localStorage.getItem("imgUrlPrefix") + e;
    }
  },
  created() {
    this.getList(this.form);
    this.getBranch();
    this.getAllProvinces();
  },
  methods: {
    // 获取列表
    getList(e) {
      gethospitalList(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.page_totals = res.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.errorStatus(err.msg);
          this.tableLoading = false;
        });
    },
    // 获取分公司
    getBranch() {
      branch()
        .then(res => {
          if (res.data.code == 0) {
            let arr = [];
            res.data.data.forEach(e => {
              arr.push({
                name: e.name,
                id: e.id
              });
            });
            this.branchType = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 获取省份
    getAllProvinces() {
      let datas = {
        isOpen: 0
      };
      getProvinces(datas)
        .then(res => {
          if (res.data.code == 0) {
            let arr = [];
            res.data.data.forEach(e => {
              arr.push({
                label: e.name,
                value: e.id
              });
            });
            this.options = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 切换省份
    handleChange(e) {
      this.form1.hospitalName = "";
      this.provinceId = e;
      this.getHospitalName(this.provinceId);
    },
    // 获取对应医院id
    handleChange1(e) {
      this.hospitalId = e;
    },
    // 获取医院名称
    getHospitalName(e) {
      let datas = { province: e };
      getHospital(datas)
        .then(res => {
          if (res.data.code == 0) {
            let arr = [];
            res.data.data.forEach(e => {
              arr.push({
                label: e.name,
                value: e.id,
                id: e.id
              });
            });
            this.hospitalName1 = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 序号
    table_index(index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1;
    },

    // 医院活动状态
    switchChange(e, f) {
      let datas = {
        is_on: f,
        id: e
      };
      getSwitch(datas)
        .then(res => {
          if (res.data.code == 200) {
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 添加
    add() {
      this.dialogFormVisible = true;
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 立即添加
    confirm(e) {
      // this.form1.icon = this.$refs.uploadImg.submitUpload()[0];
      let datas = {
        hospital_id: this.hospitalId,
        is_on: this.form1.is_on,
        // icon: this.form1.icon
      };
      this.$refs[e].validate(valid => {
        if (valid) {
          goddessAdd(datas)
            .then(res => {
              if (res.data.code == 200) {
                this.succStatus("添加成功");
                this.dialogFormVisible = false;
                this.getList();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(err => {
              this.errorStatus(err.msg);
            });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
        }
      });
    },

    // 弹窗关闭
    close() {
      this.dialogFormVisible = false;
      this.form1 = {
        hospital_id: "",
        is_on: "",
        hospitalName: ""
      };
      this.$refs.form1.clearValidate();
      this.$refs.form1.resetFields();
      // this.fileList = [];
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style scoped>
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
.footer {
  text-align: center;
}
.msgText {
  width: 370px;
  color: #444;
  font-weight: 400;
}
</style>
